<template>
    <div class="w100 f-grow p20">
        <div class="f16 fw5 fam mb20 h-start-center">
            <div class="apply-item-icon mr15"></div>
            否决项
        </div>
        <a-form-model
            :model="form"
            ref="form"
            :rules="rules"
            :colon="false"
            class="m-form-model"
            labelAlign="left"
            layout="vertical"
        >
            <a-row :gutter="10" v-for="(item, index) in list" :key="index">
                <a-col :span="24" class="mb16">
                    <a-form-model-item :label="item.label" :prop="item.key">
                        <a-radio-group v-if="item.formType === 'radio'" :name="item.key" v-model="form[item.key]">
                            <a-radio :value="2">是</a-radio>
                            <a-radio :value="1">否</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-input
                        v-if="item.formType === 'input'"
                        autoComplete="off"
                        :placeholder="'请输入' + item.label"
                        v-model.trim="form[item.key]"
                        allowClear
                    />
                    <el-date-picker
                        size="small"
                        v-if="item.formType === 'year'"
                        v-model="form[item.key]"
                        type="year"
                        format="yyyy年"
                        value-format="yyyy"
                        placeholder="选择年"
                    ></el-date-picker>
                </a-col>
            </a-row>
        </a-form-model>
        <Footer
            @save="save"
            @back="back"
            :isShowSave="isShowSave"
            @previousStep="previousStep"
            @nextStep="nextStep"
            :isShowNext="true"
            :isShowPrevious="false"
        ></Footer>
    </div>
</template>

<script>
import mixin from './mixin'
export default {
    props: {
        list: {
            type: Array,
        },
    },
    mixins: [mixin],
    data() {
        return {
            form: {},
            rules: {},
        }
    },
    mounted() {
        setTimeout(() => {
            this.init()
        }, 1000)
    },
    computed: {},
    methods: {
        init() {
            let form = {}
            const rules = {}
            if (this.record?.vetoItemJson) {
                form = JSON.parse(this.record.vetoItemJson)
            }
            let checkValue = (rule, value, callback) => {
                if (value == 2) {
                    callback(new Error('该项为是的情况下则不能申报'))
                } else {
                    callback()
                }
            }
            this.list.forEach((item, index) => {
                form[item.key] = form[item.key]
                rules[item.key] = [
                    {
                        trigger: 'blur',
                        message: '该项未填写',
                        required: true,
                    },
                    {
                        validator: checkValue,
                        trigger: 'change',
                    },
                ]
            })
            this.form = form
            this.rules = rules
        },
        async saveApi() {
            this.Bus.$emit('loadingStateChange', true)
            let res
            try {
                let params = {
                    vetoItemJson: JSON.stringify(this.form),
                    id: this.record?.id || sessionStorage.getItem('applyRecordId'),
                }
                res = await this.applyApi.notItem(params)
                if (res.code == 200) {
                    this.$message.success(res.message)
                    //新建添加否决项时，保存record.id用于后续页面
                    if (res.data) {
                        sessionStorage.setItem('applyRecordId', res.data)
                    }
                }
            } catch (e) {
                console.log(e)
            }
            this.Bus.$emit('loadingStateChange', false)
            return res
        },
    },
}
</script>

<style lang="scss" scoped></style>
